<script setup>
import { storeToRefs } from "pinia";
import { ref,computed,onMounted } from "vue";
import { useGlobalStore } from "@/stores/golbal";
const { homeSwiperList, newsList } = storeToRefs(useGlobalStore());

const getImgUrl = (name) => {
  return new URL(`/src/assets/productPicture/${name}`, import.meta.url).href;
};
// 当前显示的图片索引
const currentIndex = ref(0);

// 计算展示的图片样式（用于平滑过渡）
const swiperStyle = computed(() => {
  return {
    transform: `translateX(-${currentIndex.value * 100}%)`,
    transition: 'transform 0.5s ease-in-out'
  };
});

// 自动切换功能
let intervalId = null;
const startAutoSlide = () => {
  intervalId = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % (homeSwiperList.value.length - 2);
    
  }, 10000); // 每隔3秒切换
};

// 点击小圆点切换图片
const goToImage = (index) => {
  currentIndex.value = index;
};
// 生命周期钩子
onMounted(() => {
  startAutoSlide();
});
</script>
<template>
  <div class="ss-swiper">
    <!-- 图片容器 -->
    <div class="swiper-wrapper" >
      <div
        v-for="(item, index) in homeSwiperList"
        :key="index"
        class="swiper-item" :style="swiperStyle"
        
      >
        <img
          :src="getImgUrl(item.img)"
          alt="Swiper image"
          class="swiper-item-img"
        />
        <div class="swiper-wrapper-item-text">{{item.title}}</div>
      </div>
    </div>

    <!-- 小圆点指示 -->
    <div class="dots">
      <span
        v-for="(image, index) in homeSwiperList"
        :key="index"
        :class="['dot', { active: currentIndex === index }]"
        @click="goToImage(index)"
      ></span>
    </div>
  </div>
</template>
<style scoped>
.ss-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 2%;
}

.swiper-wrapper {
  width: 300%;
  height: 260px;
  position: relative;
  display: flex;

}

.swiper-item {
  width: 500px;
  padding-right: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease-in-out;
}
.swiper-item-img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border-radius: 65px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.8);
  margin-bottom: 10px;
}
.swiper-wrapper-item-text{
  width: 85%;
  font-size: var(--szc-font-main-small);
  color: #000;
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
  margin-bottom: 4px;
}
/* 圆点 */
.dots {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-50% );
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: rgba(255, 255, 255, 1);
}
</style>
